<template>
    <div class="allBox">
        <div class="webPageTitle">用户资产信息</div>
        <div class="leftTitle">
            <div class="dataTitle">用户资产信息表</div>

            <div style="float: right;width: 280px" class="myFromBox">
                <Input v-model="qyUserNameOrId" placeholder="请输入要查询的用户账户名/ID">
                    <Button slot="append" icon="ios-search" @click="selectData(1)"></Button>
                </Input>
            </div>
            <div style="float: right;width: 180px" class="myFromBox">
                <Select v-model="qyCoinType" style="width:150px" placeholder="请选择币类型" @on-change="updateCoinType">
                    <Option value="">全部</Option>
                    <Option v-for="item in coinTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </div>

        </div>
        <div style="float: left;width: 100%;">
            <Table highlight-row :loading="loading" :columns="tableColumns" :data="tableData"></Table>
        </div>
        <div class="pageBox">
            <!--添加-->
            <template>
                <span class="fls">汇总统计：{{Counts}}</span>
                <!--<Button type="primary" @click="openAdd()" style="float: left;margin-left: 5.5%">添加</Button>-->
                <Modal
                        v-model="addOption"
                        title="添加用户资产信息"
                        @on-ok="addDataFun()"
                        @on-cancel="closePop()">
                    <p style="margin-top: 10px;font-size: 14px">用户编号：</p>
                    <Input v-model="addUserId" size="large" placeholder="请输入用户编号！"></Input>

                    <p style="margin-top: 10px;font-size: 14px">币种：</p>
                    <Select v-model="addCoinType" style="width:150px" placeholder="请选择币类型">
                        <Option v-for="item in coinTypeList" :value="item.value" :key="item.value">{{ item.label }}
                        </Option>
                    </Select>
                    <p style="margin-top: 10px;font-size: 14px;">金额：</p>
                    <Input v-model="addValue" size="large" placeholder="请输入金额！"></Input>
                    <!--
                              <p style="margin-top: 10px;font-size: 14px;">验证码：</p>
                              <Input v-model="addCode" placeholder="请输入验证码"></Input>
                              <Button @click="send" size="large" style="margin-top: 5px" id="addButId" >
                                <span v-if="sendMsgDisabled">{{time+'秒后获取'}}</span>
                                <span v-if="!sendMsgDisabled">获取验证码</span>
                              </Button>-->

                </Modal>
            </template>
            <Page :total="total" :page-size="rows" show-total @on-change="selectData" class="pageStyle"></Page>
        </div>


        <!--读取API错误-->
        <template>
            <Modal v-model="redAPIModal" width="360" @on-cancel="closePop()" :closable="false" style="z-index: 9999">
                <p slot="header" style="color:#f60;text-align:left">
                    <Icon type="information-circled"></Icon>
                    <span>{{redAPIModalTit}}</span>
                </p>
                <div style="text-align:left">
                    <p>错误信息：</p>
                    <p>{{redAPIModalCen}}</p>
                </div>
                <div slot="footer">
                    <Button type="error" size="large" long @click="redAPIModalFun">确定</Button>
                </div>
            </Modal>

        </template>
        <!--更新-->
        <template>
            <Modal
                    v-model="upOption"
                    title="更新用户资产"
                    @on-ok="upDataFun()"
                    @on-cancel="closePop()" style="z-index: 9998">
                <p style="margin-top: 10px;font-size: 14px">用户编号：{{upData.userId}}</p>

                <p style="margin-top: 10px;font-size: 14px">币种：{{upData.coinType}}</p>

                <p style="margin-top: 10px;font-size: 14px;">金额：</p>
                <Input v-model="myValue" size="large" placeholder="请输入金额！"></Input>

                <!--<p style="margin-top: 10px;font-size: 14px;">验证码：</p>
                <Input v-model="codes" placeholder="请输入验证码"></Input>
                <Button @click="send" size="large" style="margin-top: 5px" id="upButId" >
                  <span v-if="sendMsgDisabled">{{time+'秒后获取'}}</span>
                  <span v-if="!sendMsgDisabled">获取验证码</span>
                </Button>-->

            </Modal>
        </template>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                myValue: '',
                qyUserNameOrId: '',
                qyCoinType: '',
                currentPage: '',//当前页数
                total: 0,//总条数
                rows: '',//每页面条数
                loading: true,//表单数据加载时
                Counts:'',
                tableColumns: [
                    {title: '用户ID', key: 'userId', align: 'center'},
                    {title: '账户名', key: 'userName', align: 'center'},
                    {title: '币种', key: 'coinType', align: 'center'},
                    {title: '金额', key: 'value', align: 'center'},
                    {title: '冻结金额', key: 'lockValue', align: 'center'},
                    // {title:'版本号',key:'version',align:'center'},
                    {title: '状态', key: 'statusTxt', align: 'center'},
                    // {title:'是否可以进行交易',key:'isTradeTxt',align:'center'},
                    /*{
                      title: '操作',
                      key: 'action',
                      align: 'center',
                      render: (h, params) => {
                        return h('div', [
                          h('Button', {
                            props: {
                              type: 'warning',
                              size: 'small'
                            },
                            style: {
                              marginRight: '5px'
                            },
                            on: {
                              click: () => {
                                this.openUpdate(params.row)
                              }
                            }
                          }, '分红'),
                        ]);
                      }
                    }*/
                ],
                tableData: [],
                redAPIModal: false,
                redAPIModalTit: '',
                redAPIModalCen: '',
                upOption: false,
                addOption: false,
                upData: {},
                codes: '',
                addUserId: '',
                addCoinType: 'EX',
                addValue: '',
                addCode: '',
                time: 60, // 发送验证码倒计时
                sendMsgDisabled: false,
                coinTypeList: [
                    {
                        value: 'USDT',
                        label: 'USDT'
                    }
                ],
            }
        },
        methods: {
            /*关闭Model*/
            closePop: function () {
                this.time = 1
            },
            /*计时器*/
            send() {
                let me = this;
                me.obtainCode();
                me.sendMsgDisabled = true;
                document.getElementById('upButId').disabled = "disabled";
                document.getElementById('addButId').disabled = "disabled";
                let interval = window.setInterval(function () {
                    if ((me.time--) <= 1) {
                        me.time = 5;
                        me.sendMsgDisabled = false;
                        window.clearInterval(interval);
                        var butObj = document.getElementById('upButId');
                        butObj.attributes.removeNamedItem("disabled");
                        var butAddObj = document.getElementById('addButId');
                        butAddObj.attributes.removeNamedItem("disabled");
                    }
                }, 1000);
            },
            /**
             * 获取币种下拉列表的数据
             * **/
            getCoinTypeList: function () {
                let _self = this;
                _self.$http.get(_self.service + '/coin/onlyCoinList')
                    .then(function (res) {
                        if (res.data.code == '001') {
                            let data = res.data.result.data;
                            for (let i in data) {
                                data[i].value = data[i].coinType;
                                data[i].label = data[i].coinType;
                            }
                            _self.coinTypeList = data;
                        }
                    })
            },
            /*打开框*/
            openUpdate: function (obj) {
                this.upOption = true;
                this.upData = obj;
                this.time = 60;
                this.myValue = "";
                this.codes = "";
            },
            openAdd: function () {
                this.addOption = true;
                this.time = 60;
                this.addUserId = "";
                this.addValue = "";
                this.addCode = "";
            },
            /*请求数据*/
            selectData: function (page) {
                this.qyUserNameOrId = this.qyUserNameOrId.replace(/(^\s*)|(\s*$)/g, "")
                this.currentPage = page;
                var _self = this;
                _self.$http.get(_self.service + "/coin/user/list", {
                    params: {
                        index: page,
                        rows: _self.rows,
                        coinType: _self.qyCoinType,
                        userIdOrName: _self.qyUserNameOrId
                    }
                }).then(function (res) {
                    if (res.data.code == '001') {
                        let tableData = res.data.result.list;
                        for (var i in tableData) {
                            if (tableData[i].isTrade == 0) {
                                tableData[i].isTradeTxt = "不可交易"
                            } else if (tableData[i].isTrade == 1) {
                                tableData[i].isTradeTxt = "可以交易"
                            }

                            if (tableData[i].status == 0) {
                                tableData[i].statusTxt = "无效"
                            } else if (tableData[i].status == 1) {
                                tableData[i].statusTxt = "有效"
                            }
                        }
                        _self.tableData = tableData;
                        _self.loading = false
                        _self.total = res.data.result.total;
                        _self.Counts = res.data.result.Counts;
                    } else {
                        _self.modalFun('读取列表信息错误', res.data.msg)
                    }
                })
            },
            /*请求验证码*/
            obtainCode: function () {
                var _self = this;
                _self.$http.get(_self.service + "/coin/mobile/code")
                    .then(function (res) {
                        if (res.data.code == '001') {
                            _self.$Message.success('短信已发送！');
                        } else {
                            _self.upOption = false;
                            _self.addOption = false;
                            _self.modalFun('读取验证码错误', res.data.msg)
                        }
                    })
            },
            /*修改 数据*/
            upDataFun: function () {
                var _self = this;
                _self.$http.post(_self.service + "/coin/user", {
                    coinType: _self.upData.coinType,
                    userId: _self.upData.userId,
                    value: _self.myValue,
                    code: _self.codes
                }).then(function (res) {
                    if (res.data.code == '001') {
                        _self.myValue = "";
                        _self.time = 1;
                        _self.selectData(_self.currentPage);
                        _self.$Notice.success({
                            title: res.data.msg,
                        });
                    } else {
                        _self.upOption = false
                        _self.modalFun('修改操作错误', res.data.msg)
                        _self.selectData(_self.currentPage);
                    }
                })
            },
            /*添加 数据*/
            addDataFun: function () {
                let _self = this;
                if (_self.addUserId.replace(/(^\s*)|(\s*$)/g, "") == "") {
                    this.$Message.warning("用户编号不能为空！")
                    this.time = 1;
                    return
                }
                if (_self.addCoinType.replace(/(^\s*)|(\s*$)/g, "") == "") {
                    this.$Message.warning("币种类型不能为空！")
                    this.time = 1;
                    return
                }
                if (_self.addValue.replace(/(^\s*)|(\s*$)/g, "") == "") {
                    this.$Message.warning("金额不能为空！")
                    this.time = 1;
                    return
                }
                // if(_self.addCode.replace(/(^\s*)|(\s*$)/g, "" ) == ""){
                //   this.$Message.warning("验证码不能为空！")
                //   this.time = 1;
                //   return
                // }

                _self.$http.post(_self.service + "/coin/user", {
                    coinType: _self.addCoinType,
                    userId: _self.addUserId,
                    value: _self.addValue,
                    code: _self.addCode
                }).then(function (res) {
                    if (res.data.code == '001') {
                        _self.addCode = "";
                        _self.addCoinType = "";
                        _self.addUserId = "";
                        _self.time = 1;
                        _self.$Notice.success({
                            title: res.data.msg,
                        });
                        _self.selectData(_self.currentPage);
                    } else {
                        _self.addOption = false
                        _self.modalFun('添加操作错误', res.data.msg)
                        _self.selectData(_self.currentPage);
                    }
                })
            },
            /*获取浏览器高度对 table的 row 显示进行数量控制 */
            tableRowH: function () {
                var _self = this;
                var winHeight = document.documentElement.clientHeight;
                _self.rows = Math.floor((winHeight - (40 + 50 + 50 + 100)) / 48) - 1;
            },
            /*错误信息展示框*/
            modalFun: function (modTit, modCen) {
                this.redAPIModal = true;
                this.redAPIModalTit = modTit;
                this.redAPIModalCen = modCen;
            },
            /*关闭错误信息展示框*/
            redAPIModalFun: function () {
                this.redAPIModal = false;
                this.time = 1
            },
        },
        created: function () {
            this.tableRowH();
            this.selectData(1);
            // this.getCoinTypeList();
        },
    }
</script>
<style>
    .ivu-modal {
        z-index: 8888
    }

    .imgBoxImg img {
        width: 100%;
        height: 100%;
    }

    .pageBox {
        float: left;
        width: 100%;
        margin-top: 10px
    }

    .pageStyle {
        float: right;
        margin-right: 20px;
        margin-bottom: 10px;
    }

    .fls {
        float: left;
        margin-left: 10px;
        margin-top: 10px;
        display: block;
        text-align: left;
        margin-bottom: 20px;
        font-size: 16px;
        font-weight: bold;
        color: #2c8cf0;
    }
</style>
